<template>
  <!--  <div>-->
  <!--    <el-card id="card">-->
  <!--      <div id="content">-->
  <!--        <el-avatar :size="60" fit="cover" :src="friendInfo['avatar_url']" />-->
  <!--        <div id="textArea">-->
  <!--          <div>{{ friendInfo['title'] }}</div>-->
  <!--        </div>-->
  <!--      </div>-->
  <!--    </el-card>-->
  <!--  </div>-->
  <el-card>
    <el-avatar :size="60" fit="cover" :src="friendInfo['avatar_url']" />
    <div>{{ friendInfo['title'] }}</div>
  </el-card>
</template>

<script>
export default {
  name: 'FriendCard',
  props: {
    friendInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  }
}
</script>

<style scoped>
div {
  /*color: white;*/
}

#content {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 10rem;
}
#card {
  font-size: 15px;
  background-color: #409EFF;
  min-width: 10rem;
}

#textArea {
  text-align: center;
  margin: 0 15px 0 15px;
  width: 15rem;
}
</style>
